<template>
    <el-breadcrumb class="vab-breadcrumb" separator=">">
        <el-breadcrumb-item v-for="(item, index) in levelList" :key="index">
            <a @click.prevent="handleLink(item.redirect)">
                <vab-icon v-if="item.meta && item.meta.icon" :icon="item.meta.icon"/>
                {{ translate(item.meta.title) }}
            </a>
        </el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script lang="ts">
import BaseVue from '../../../common/base-vue'
import {Component, Watch} from 'vue-property-decorator'
import {RawLocation, RouteRecord} from "vue-router/types/router";

@Component({components: {}})
export default class VabBreadcrumb extends BaseVue {
    private levelList: RouteRecord[];

    @Watch('$route', {immediate: true})
    handler() {
        this.levelList = this.getBreadcrumb();
    };

    private getBreadcrumb(): RouteRecord[] {
        return this.$route.matched.filter(item => item.meta && item.meta.title);
    };

    private handleLink(redirect: RawLocation) {
        this.$router.push(redirect);
    };

}
</script>

<style lang="scss" scoped>
.vab-breadcrumb {
    height: $base-nav-height;
    font-size: $base-font-size-default;
    line-height: $base-nav-height;

    ::v-deep {
        .el-breadcrumb__item {
            .el-breadcrumb__inner {
                a {
                    font-weight: normal;
                    color: #515a6e;
                }
            }

            &:last-child {
                .el-breadcrumb__inner {
                    a {
                        color: #999;
                    }
                }
            }
        }
    }
}
</style>
